<template>
  <div class="computed">

    <div>
      {{message}}
    </div>
    <div>
      message.split('').reverse().join('')：
      <div>{{message.split('').reverse().join('')}}</div>
    </div>
    <div>
      直接利用计算属性: {{NewMessage}}
    </div>


    <div class="watch">
      <button @click="GetText">watch</button>
      <p>{{WatchText}}</p>
      <input type="text" v-model="NullMessage">
    </div>

  </div>
</template>

<script>
  export default {
    name: "computed",
    data() {
      return {
        message: "Hello Word!",
        MessageNUll: "What is pen?",
        WatchText: "我是初始化值"
      }
    },
    computed: {
      NewMessage() {
        return this.message.split('').reverse().join('')
      },
      NullMessage: {
        get: function () {
          return this.MessageNUll + "//////"
        },
        set: function (NewPen) {
          mui.alert(NewPen,"","","","div")
        }
      }
    },
    watch: {
      WatchText() {
        mui.alert('监听到你改变了',"","","","div")
      }
    },
    methods: {
      GetText() {
        this.WatchText = '我被更改了！';
      }
    }
  }
</script>

<style scoped lang="scss">
  .computed {
    width: 100%;
    height: 100%;

    .watch {
      margin-top: 20px;
    }

  }
</style>
